<template>
	<div class="userpage">
		<div class="user-head">
			<div class="search">
				<div class="s-inp">
					<img src="../assets/img/ss.png" alt="" srcset="">
					<el-input class="inp" placeholder="请输入地址" v-model="content" clearable></el-input>
				</div>
				<el-date-picker @change="changeTime" v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
				</el-date-picker>
				<button @click="search('1')">查询</button>
			</div>
		</div>
		<div class="list-box" id="list-box">
			<el-table ref="usersTable" :data="list" v-loading="loading" :height="height" stripe style="width: 100%;"
				header-row-class-name="headcss">
				<el-table-column prop="Addr" label="地址" align="center" width="180" fixed="left">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" :content="scope.row.Addr" placement="right">
							<p style="cursor: pointer;">{{ addrStr(scope.row.Addr,8) }}</p>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="Amount" label="提取数量" align="center"></el-table-column>
				<el-table-column prop="FeeAmount" label="手续费" align="center"></el-table-column>
				<el-table-column prop="Status" label="状态" align="center">
					<template slot-scope="scope">
						{{scope.row.Status==1?'成功':scope.row.Status==-1?'失败':'pedding'}}
					</template>
				</el-table-column>
				<el-table-column prop="CreateTime" label="提取时间" align="center"></el-table-column>
				<el-table-column prop="CreateBlock" label="区块高度" align="center"></el-table-column>
				<el-table-column prop="Hash" label="Hash" align="center" width="180">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" :content="scope.row.Hash" placement="right">
							<p style="cursor: pointer;">{{ addrStr(scope.row.Hash,8) }}</p>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page-limit">
			<el-pagination @size-change="SizeChange" @current-change="CurrentChange" :current-page="currentPage"
				:page-sizes="[15, 50, 100, 200]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		QueryWithdrawal
	} from '@/utils/api'
	export default {
		data() {
			return {
				currentPage: 1,
				size: 15,
				total: 0,
				height: '100%',
				loading: false,
				list: [],
				content: '',
				time: '',
				t1:'',
				t2:'',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			}
		},
		mounted() {
			this._QueryWithdrawal()
		},
		methods: {
			changeTime(e){
				this.currentPage = 1
				if(e==null){
					this.t1 = ''
					this.t2 = ''
				}else{
					var y1 = new Date(e[0]).getFullYear()
					var y2 = new Date(e[0]).getMonth()+1
					var y3 = new Date(e[0]).getDate()
					var x2 = new Date(e[1]).getMonth()+1
					var x3 = new Date(e[1]).getDate()
					var t1 = y1+'-'+y2+'-'+y3 //+" "+'00:'+'00:'+'01'
					var t2 = y1+'-'+x2+'-'+x3 //+" "+'24:'+'00:'+'00'
					this.t1 = t1
					this.t2 = t2
				}
				this._QueryWithdrawal()
			},
			// 基础查询
			async _QueryWithdrawal() {
				let params = {
					Addr: this.content,
					Limit: this.size,
					Size: this.currentPage - 1,
					BeginTime: this.t1,
					EndTime: this.t2,
				}
				this.loading = true
				let {
					data,
					response
				} = await QueryWithdrawal(params)
				let {
					total,
					dataList
				} = data
				this.loading = false
				this.total = total
				this.list = dataList
			},
			//搜索
			async search(type) {
				this._QueryWithdrawal()
			},

			SizeChange(size) {
				this.size = size
				this.currentPage = 1
				this._QueryWithdrawal()
			},
			CurrentChange(page) {
				this.currentPage = page
				this._QueryWithdrawal()
			},
			addrStr(str, num) {
				if (str) {
					if (num) {
						return str.substring(0, num) + '...' + str.substring(str.length - num, str.length)
					} else {
						return str.substring(0, 10) + '...' + str.substring(str.length - 10, str.length)
					}
				} else {
					return str
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.userpage {
		padding: 20px 20px 10px 20px;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list-box {
		flex: 1;
		overflow-y: scroll;
	}

	.page-limit {
		display: flex;
		justify-content: center;
		padding-top: 10px;
	}

	.user-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20px;
	}

	.stsr {
		color: #2389FE;
		font-weight: bolder;
		margin: 0 4px;
		font-size: 16px;
	}

	.search {
		display: flex;
		align-items: center;
		.s-inp {
			height: 38px;
			width: 320px;
			display: flex;
			align-items: center;
			background: #fff;
			padding: 0 10px;
			border-radius: 5px;
			flex: 1;
			margin-right: 10px;
			border: 1px solid #DCDFE6;
			overflow: hidden;
			.inp {
				border: none;
				outline: none;
				flex: 1;
			}

			img {
				margin-right: 10px;
			}
		}

		button {
			width: 70px;
			height: 40px;
			background: #2389FE;
			border-radius: 5px;
			color: #fff;
			margin-left: 10px;

			&:active {
				opacity: 0.8;
			}
		}
	}

	.user-do {
		display: flex;
		align-items: center;

		.btn1 {
			width: 70px;
			height: 40px;
			background: rgba(211, 12, 63, 0.99);
			border-radius: 5px;
			color: #fff;

			&:active {
				opacity: 0.8;
			}
		}

		.btn2 {
			width: 70px;
			height: 40px;
			background: #2389FE;
			border-radius: 5px;
			color: #fff;
			margin: 0 10px;

			&:active {
				opacity: 0.8;
			}
		}

		.btn3 {
			width: 171px;
			height: 40px;
			border-radius: 5px;
			border: 1px solid #2389FE;
			color: #2389FE;
			background: #fff;

			&:active {
				border: 1px solid #15549d;
				color: #15549d;
			}
		}
	}

	.page-title {
		display: flex;
		align-items: center;
		padding-bottom: 20px;

		p {
			margin-left: 10px;
			font-size: 24px;
			color: #333333;
		}

		img {
			width: 24px;
		}
	}
</style>
<style>
	.el-table {
		border-radius: 5px;
	}

	.el-table th.el-table__cell {
		background-color: #2389FD !important;
		color: #fff;
	}

	.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
		background: #DEEEFF !important;
	}

	.el-table td.el-table__cell {
		border: none
	}

	.inp .el-input__inner {
		border: none;
		padding-left: 0;
	}
</style>